<template>
<el-container>
  <el-header style="height: fit-content">

    <el-form label-width="80px" ref="form" v-model="form">

   <el-form-item label="项目名称">
     <el-select v-model="project" style="width:100%" @change="getJsDetail">
       <el-option :label="item.name" :value="item" v-for="(item,i) in project_list" :key="i"></el-option>
     </el-select>
   </el-form-item>

      <el-row :gutter="5">
        <el-col :span="8">
          <el-form-item label="项目编号">
            <el-input v-model="form.batch_id" placeholder="项目待分配" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="客户名称">
          <el-input v-model="form.partner_id" placeholder="项目待分配" disabled></el-input>
        </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="执行单位">
            <el-input v-model="form.company" placeholder="项目待分配" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="部门">
            <el-input v-model="form.dept" placeholder="项目待分配" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="5">
        <el-col :span="8">
          <el-form-item label="负责人">
            <el-input v-model="form.leader" placeholder="负责人" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="负责人电话" label-width="120px">
            <el-input v-model="form.leader_mobile" placeholder="联系方式" maxlength="11" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="客户负责人" label-width="100px">
            <el-input v-model="form.customer" placeholder="负责人" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="5">
        <el-col :span="8">
          <el-form-item label="销售经理" label-width="80px">
            <el-input v-model="form.seller" placeholder="负责人" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="销售经理电话"  label-width="120px">
            <el-input v-model="form.seller_mobile" placeholder="联系方式" maxlength="11" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="客户负责人电话" label-width="130px">
            <el-input v-model="form.customer_mobile" placeholder="联系方式" maxlength="11" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="5">
        <el-col :span="8">
          <el-form-item label="项目城市" prop="city">
            <el-input v-model="form.city" placeholder="项目城市" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="开始时间">
            <el-input v-model="form.start" placeholder="项目待分配" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="结束时间">
            <el-input v-model="form.stop" placeholder="项目待分配" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
   </el-form>
  </el-header>
  <el-main>

  <table class="tablex" cellpadding="0" cellspacing="0" border="1" >
    <tr>
      <th colspan="3">预算数据</th>
      <th colspan="5">结算数据</th>
    </tr>

    <tr>
      <th class="tht oldth" style="text-align:center" >项目时间</th>
      <th class="tht oldth" colspan="2">
        <el-input v-model="ys.start" disabled></el-input>
        <el-input v-model="ys.stop" disabled></el-input>
      </th>
      <th class="tht" style="text-align:center" >项目时间</th>
      <th class="tht" colspan="4" style="text-align: left">
        <el-date-picker
          v-model="js.start"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
        <el-date-picker
          v-model="js.stop"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </th>
    </tr>

    <tr>
      <th class="tht oldth" style="text-align:center" >预算总金额</th>
      <th class="tht oldth" colspan="2">
        <el-input v-model="ys.offer" disabled></el-input>
      </th>
      <th class="tht" style="text-align:center" >结算总金额</th>
      <th class="tht" colspan="4">
       <el-input v-model="js.offer" @blur="caculateProfit"></el-input>
      </th>
    </tr>

    <tr>
      <th class="tht oldth" style="text-align:center" >预算总成本</th>
      <th class="tht oldth" colspan="2">
        <el-input v-model="ys.cost" disabled></el-input>
      </th>
      <th class="tht" style="text-align:center" >结算总成本</th>
      <th class="tht" colspan="4">
        <el-input v-model="js.cost"></el-input>
      </th>
    </tr>

    <tr>
      <th class="tht oldth" style="text-align:center">预算项目</th>
      <th class="tht oldth" style="text-align:center">预算金额</th>
      <th class="tht oldth" style="text-align:center">预算备注</th>

      <th style="width:80px">结算项目</th>
      <th style="width:80px">结算金额</th>
      <th style="width:80px">已付金额</th>
      <th style="width:80px">结算备注</th>
      <th >操作</th>
    </tr>

    <tr v-for="(item,i) in costList" :key="i">
      <th class="tht oldth"><el-input v-model="item.title" disabled></el-input></th>
      <th class="tht oldth"><el-input v-model="item.ysmoney" disabled></el-input></th>
      <th class="tht oldth"><el-input v-model="item.desc" disabled></el-input></th>
      <th><el-input v-model="item.title"></el-input></th>
      <th><el-input v-model="item.jsmoney" @blur="caculateProfit"></el-input></th>
      <th><el-input v-model="item.yf" disabled></el-input></th>
      <th><el-input v-model="item.desc"></el-input></th>
      <th><el-button size="mini" type="danger" disabled>移除</el-button></th>
    </tr>

    <tr class="xiaotradd" v-for="(vv,n) in newJs" :key="'n_' + n">
      <td class="oldth" colspan="3"></td>
      <th class="tht"><el-input v-model="vv.title" placeholder="付款标题"></el-input></th>
      <td><el-input v-model="vv.money" placeholder="金额" @blur="caculateProfit"></el-input></td>
      <td><el-input v-model="vv.yf" placeholder="0.00" disabled></el-input></td>
      <td><el-input v-model="vv.desc" placeholder="备注"></el-input></td>
      <td><el-button type="danger" size="mini" @click="delJsData(n)" :disabled="vv.disabled">移除</el-button></td>
    </tr>

    <tr id="xiao_btn_new">
      <th colspan="3" class="oldth">&nbsp;</th>
      <th colspan="5" style="text-align:center">
        <el-button type="primary" @click="addYsData">添加新行</el-button>
      </th>
    </tr>

    <tr>
      <th class="oldth">小计</th>
      <td class="oldth" colspan="2"><el-input v-model="ys.sub_total" disabled></el-input></td>
      <td colspan="5"><el-input v-model="js.sub_total" disabled></el-input></td>
    </tr>
    <tr>
      <th class="oldth">税</th>
      <td class="oldth" colspan="2"><el-input v-model="ys.tax" disabled></el-input></td>
      <td colspan="5"><el-input v-model="js.tax" disabled></el-input></td>
    </tr>
    <tr>
      <th class="oldth">总计</th>
      <td class="oldth" colspan="2"><el-input v-model="ys.total" disabled></el-input></td>
      <td colspan="5"><el-input v-model="js.total" disabled></el-input></td>
    </tr>
    <tr>
      <th class="oldth">利润金额</th>
      <td class="oldth" colspan="2"><el-input v-model="ys.profit" disabled></el-input></td>
      <td colspan="5"><el-input v-model="js.profit" disabled></el-input></td>
    </tr>
    <tr>
      <th class="oldth">利润率</th>
      <td class="oldth" colspan="2"><el-input v-model="ys.percent" disabled></el-input></td>
      <td colspan="5"><el-input v-model="js.percent" disabled></el-input></td>
    </tr>
<!--附件-->
    <tr>
      <th class="oldth">附件</th>
      <td class="oldth" valign="top" colspan="2" style="padding:0">
        <table  style="margin:0">
          <thead >
          <tr class="oldth">
            <th style="width:40%">预算附件文件名</th>
            <th>大小</th>
            <th>类型</th>
            <th>操作</th>
          </tr></thead>
          <tbody class="oldth">
          <tr v-for="(file,f) in ys.file_list">
            <td>{{file.fileName}}</td>
            <td>{{file.size}}</td>
            <td>{{file.ext}}</td>
            <td>
              <el-button size="mini" type="primary">下载</el-button>
              <el-button size="mini" type="primary">预览</el-button>
            </td>
          </tr>
          </tbody>
        </table>
      </td>
      <td colspan="5" valign="top">
            <el-upload
              style="text-align: left;"
              :action="upload_url"
              :on-success="uploadFile"
              :file-list="js.file_list"
              :show-file-list="false"
             :data="fileParams"
              multiple
            >
              <el-button size="small" type="primary">上传结算附件</el-button>
            </el-upload>
            <table>
              <thead>
              <tr>
                <th style="width:40%">结算附件文件名</th>
                <th>大小</th>
                <th>类型</th>
                <th>操作</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="(item,i) in js.file_list" :key="'f_'+i">
                <td>{{item.fileName}}</td>
                <td>{{item.size}}</td>
                <td>{{item.ext}}</td>
                <td>
                  <el-button size="mini" type="primary">下载</el-button>
                  <el-button size="mini" type="primary">预览</el-button>
                </td>
              </tr>
              </tbody>
            </table>
      </td>
    </tr>

    <tr>
      <th class="oldth">活动附件</th>
      <td class="oldth" colspan="2"></td>
      <td colspan="5" valign="top">
        <el-upload
          style="text-align: left;"
          :action="upload_url"
          :on-success="uploadFile"
          :file-list="js.activity_list"
          :show-file-list="false"
          :data="fileParams_hd"
          multiple
        >
          <el-button size="small" type="primary">上传活动附件</el-button>
        </el-upload>
        <table class="layui-table" lay-size="sm">
          <thead>
          <tr>
            <th style="width:40%">活动附件文件名</th>
            <th>大小</th>
            <th>类型</th>
            <th>操作</th>
          </tr></thead>
          <tbody>
          <tr v-for="(item,i) in js.activity_list" :key="'a_'+i">
            <td>{{item.fileName}}</td>
            <td>{{item.size}}</td>
            <td>{{item.ext}}</td>
            <td>
              <el-button size="mini" type="primary">下载</el-button>
              <el-button size="mini" type="primary">预览</el-button>
            </td>
          </tr>
          </tbody>
        </table>
      </td>
    </tr>

    <tr>
      <th class="oldth">设计附件</th>
      <td class="oldth" colspan="2"></td>
      <td colspan="5" valign="top">
        <el-upload
          style="text-align: left;"
          :action="upload_url"
          :on-success="uploadFile"
          :file-list="js.design_list"
          :show-file-list="false"
          :data="fileParams_sj"
          multiple
        >
          <el-button size="small" type="primary">上传设计附件</el-button>
        </el-upload>
        <table class="layui-table" lay-size="sm">
          <thead>
          <tr>
            <th style="width:40%">设计文件名</th>
            <th>大小</th>
            <th>类型</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(item,i) in js.design_list" :key="'d_'+i">
            <td>{{item.fileName}}</td>
            <td>{{item.size}}</td>
            <td>{{item.ext}}</td>
            <td>
              <el-button size="mini" type="primary">下载</el-button>
              <el-button size="mini" type="primary">预览</el-button>
            </td>
          </tr>
          </tbody>
        </table>
      </td>
    </tr>

    <tr>
      <th class="oldth">销售经理</th>
      <td class="oldth" colspan="2"><el-input v-model="ys.seller" disabled></el-input></td>
      <td colspan="5"><el-input v-model="ys.seller" disabled></el-input></td>
    </tr>

    <tr>
    <th class="oldth">备注信息</th>
    <td class="tht oldth" colspan="2" valign="top">
      <el-input type="textarea" v-model="ys.desc" disabled show-word-limit  maxlength="1500"></el-input>
    </td>
    <td class="tht" colspan="5" valign="top">
      <el-input type="textarea" v-model="js.desc" show-word-limit  maxlength="1500"></el-input>
    </td>
    </tr>

    <tr>
      <th class="tht oldth" colspan="3" style="text-align: left;">
        <history :history="ys.history"></history>
      </th>
      <th colspan="5" style="text-align: left;">
         <history :history="js.history"></history>
      </th>
    </tr>

    <tr>
      <td colspan="8" style="text-align: center;">
        <el-button type="primary" @click="saveProjectJs(0)">提交</el-button>
        <el-button type="primary" @click="saveProjectJs(1)">保存</el-button>
        <el-button type="info">重置</el-button>
      </td>
    </tr>

  </table>

  </el-main>

  <el-footer>

  </el-footer>
</el-container>
</template>

<script>
  import {getProjectJsSelect,getProjectJsData,saveProjectJs} from '@/apilist/Project'
  import history from "../common/history";
  import baseInfo from "../common/baseInfo";
    export default {
        name: "project_js",
        data(){
            return {
                upload_url: this.fun.APP_VUE_UPLOAD_URL,
                fileParams: {'dir': 'js',name: 'file_list'},
                fileParams_hd: {'dir': 'js',name: 'activity_list'},
                fileParams_sj: {'dir': 'js',name: 'design_list'},
                fileParams_note: {'dir': 'js',name: 'note_list'},
                project: '',
                rate: '',
                form: {
                    project: '',
                    partner_id: '',
                    company: '',
                    dept: '',
                    leader: '',
                    leader_mobile: '',
                    customer: '',
                    customer_mobile: '',
                    seller: '',
                    seller_mobile: '',
                    city: '',
                    start: '',
                    stop: '',
                },
                project_list: [],
                ys: {
                    start: '',
                    stop: '',
                    desc: '',
                    cost: '',
                    offer: '0.00',
                    subtotal: '0.00',
                    total: '0.00',
                    profit: '0.00',
                    percent: '0.00',
                    tax: '0.00',
                    file_list: [
                        {fileName: 'test',ext: 'jpg',size:'1M'},
                        {fileName: 'test2',ext: 'jpg',size:'1M'},
                        {fileName: 'test3',ext: 'jpg',size:'1M'},
                    ],
                    seller: '李雷',
                    desc: ''
                },

                costList: [

                ],

                js:{
                    start: '',
                    stop: '',
                    cost: '0.00',
                    offer: '0.00',
                    sub_total: '0.00',
                    total: '0.00',
                    profit: '0.00',
                    percent: '0.00',
                    tax: '0.00',
                    //附件
                    file_list: [
                    ],
                    //设计附件
                    design_list: [
                    ],
                    //活动附件
                    activity_list: [
                    ],

                    desc: ''
                },
                newJs: [
                    {id:0,title:'报销',money: '0.00',yf: '0.00',desc: '报销',paytype: 3,disabled: true},
                ],

            }
        },
        components:{history},
        methods:{
            delJsData(i){
                console.log(i)
                this.newJs.splice(i,1);
            },

            addYsData(){
              let js = {id:'',title:'',money: '',yf: '',desc: '',paytype: 4,disabled:false}
                this.newJs.push(js)
            },

            uploadFile(res,file,fileList){
                let prop = 'file_list';
                prop = res.data.name;
                let fileArr = this.js[prop]
                let isRepeat = false
                console.log(fileArr.length)

                //return ;
                if(fileArr.length > 0){
                  fileArr.forEach((item) => {
                      if(file.name == item.fileName) isRepeat = true
                  })
                }

                if(!isRepeat){
                    this.js[prop].push(res.data)
                }else{
                    this.$message.error('文件重复,请检查')
                }
            },
            //获取结算下拉
            getJsSelect(){
                getProjectJsSelect().then(res => {
                    this.project_list = res.data
                })
            },
            //获取结算数据
            getJsDetail(){
                let params = {id: this.project.id,ysid: this.project.ysid}
                getProjectJsData(params).then(res => {
                    this.form = res.data.baseInfo
                    this.ys = res.data.ys
                    this.js = res.data.js
                    this.rate = res.data.baseInfo.rate
                    this.costList = res.data.costList
                })

            },
            //提交结算数据
            saveProjectJs(is_save){
                let params = {
                    xmid: this.project.id,
                    js: this.js,
                    costList: this.costList,
                    newJs: this.newJs,
                    is_save: is_save,
                    ysid: this.project.ysid
                }

                saveProjectJs(params).then(res => {
                    console.log(res)
                })

            },

            //计算利润
            caculateProfit(){
                let js = this.js
                let offer = this.fun.resetMoney(js.offer)
                let costSum = 0
                let total = 0
                let subtotal = 0
                let newsum = 0
                let profit = 0
                let percent = 0
                this.costList.forEach((cost) => {
                   if(cost.paytype != 7) costSum += this.fun.resetMoney(cost.jsmoney)
                })

                this.newJs.forEach((item) => {
                    newsum += this.fun.resetMoney(item.money)
                })

                //税
                let tax = offer * this.rate
                //小计
                subtotal = costSum + newsum
                //总计
                total = tax + subtotal
                //利润金额
                profit = offer - total

                percent = profit / offer * 100

                this.js.sub_total = this.fun.fmoney(subtotal)

                this.js.total = this.fun.fmoney(total)

                this.js.tax = this.fun.fmoney(tax)

                this.js.profit = this.fun.fmoney(profit)

                this.js.percent = this.fun.fmoney(percent)

                this.js.offer = this.form.currency + this.fun.fmoney(offer)

                console.log(costSum)

            }
        },
        created() {
          this.getJsSelect()
        }
    }
</script>

<style scoped>
  .tablex{
    border: 1px solid #fff;border-collapse: collapse; width:100%;text-align:center;
  }
  .tablex th,.tablex td{
    border: 1px solid #fff;padding: 10px;
  }

  .tablex .oldth{
    background-color: #ccc;
  }


</style>
